<template>
	<view>
		<!--选择地址-->
		<view class="address" @click="chooseAddress">
			<view class="address1">
				<text class="icon">&#xe8ae;</text>
			</view>
			<view class="address2">
				<text>选择地址</text>
			</view>
			<view class="address3">
				<text class="icon">&#xe65b;</text>
			</view>
		</view>
		<!--收货地址详情-->
		<view class="addressDetail"> 
			<view class="name">
				<text class="icon">&#xe773; 姓名: {{userAddress.name}}</text>
			</view>
			<view class="tel">
				<text class="icon">&#xe773; 电话: {{userAddress.tel}}</text>
			</view>
			<view class="address">
				<text class="icon">&#xe773; 地址: {{userAddress.address}}</text>
			</view>
		</view>
		
		<!--商品-->
		<view class="product" v-for="(item,index) in products" :key="item.id">
			<view class="left">
				<view>
					<image :src="imgs[index].url"></image>
				</view>
			</view>
			<view class="right">
				<view class="proname">
					<text>{{item.product.proName}}</text>
				</view>
				<view class="proprice">
					<text>单价 : {{item.product.price}}</text>
				</view>
				<view class="pronumber">
					<text>数量 : {{item.number}}</text>
				</view>
			</view>
		</view>
		<!--合计-->
		<view class="total">
			<view class="totalleft">
				<text>合计金额</text>
			</view>
			<view class="totalright">
				<text>¥ {{total}}</text>
				</view>
		</view>
		
		<!--确认下单-->
		<view class="payorder" @click="fukuan">
			<text>确认下单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//商品集合
				products:[],
				//图片集合
				imgs:[],
				//用户地址
				userAddress:{
					name:null,
					tel:null,
					address:null
				},
				//用户信息
				user:{
					
				},
				//合计
				total:0
			}
		},
		onLoad() {
			//获取用户信息
			// uni.getStorage({
			// 	key:"user",
			// 	success: (res) => {
			// 		this.user=res.data;
			// 	}
			// })
			//同步获取缓存
			const value=uni.getStorageSync("user");
			this.user=value;
			uni.getStorage({
				key:"shoppingCarList",
				success:(res)=>{
					this.products=res.data;
					console.log(this.products);
					for(var i=0;i<this.products.length;i++){
						//只取每个商品的第一张图片
						this.imgs.push(this.products[i].product.img[0]);
					}
					console.log(this.imgs);
				}
			})
			
			uni.getStorage({
				key:"total",
				success:(res)=>{
					this.total=res.data;
				}
			})

			uni.request({
				url:this.webUrl+"selectUserMorenAddress",
				data:{
					'userId':this.user.userId
				},
				success: (res) => {
					this.userAddress=res.data.obj;
				}
			})
		},
		methods: {
			//跳转地址管理
			chooseAddress(){
				uni.navigateTo({
					url:"/pages/liu/chooseAddress/chooseAddress?userId="+this.user.userId
				})
			},
			//付款
			fukuan(){
				console.log(this.products);
				var _this=this;
				uni.showModal({
				    title: '提示',
				    content: '确定下单付款?',
				    success: function (res) {
				        if (res.confirm) {
							var xx=_this.userAddress;
							console.log(xx);
							xx['total']=_this.total;
							//定义一个主键id
							var proOrderId=0;
							uni.request({
								url:_this.webUrl+'addNewProductOrder',
								data:xx,
								method:'POST',
								header:{"content-type":"application/x-www-form-urlencoded;charset=UTF-8"},
								success: (res) => {
									proOrderId=res.data.obj;
								}
							})
							setTimeout(function(){
								for(var i=0;i<_this.products.length;i++){
									//增加订单
									uni.request({
										url:_this.webUrl+"addProductOrderDetail",
										data:{
											productOrderId:proOrderId,
											proId:_this.products[i].proId,
											categoryId:_this.products[i].product.categoryId,
											proname:_this.products[i].product.proName,
											price:_this.products[i].product.price,
											number:_this.products[i].number,
											url:_this.products[i].product.img[0].url
										}
									})
									//删除购物车
									uni.request({
										url:_this.webUrl+"deleteShoppingCarById",
										data:{
											id:_this.products[i].id
										}
									})
									setTimeout(function(){
										//支付支付
										const jyAliPay = uni.requireNativePlugin('JY-ALIPAY')
										jyAliPay.show({ // 发起支付
											if_sanbox: true,
											auto_create_order_info: true,
											appid: '2016102100732354',
											rsa2_private: "MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCmAl8QTWuGki+mmA/4m/PWVO4JwhkB93nsGZnzNioqg6CiStDucAUom1jfWkntAnzvJ3xuC/Ggu6ldM3CDxl0IC1/2/UKB7fpQaf8QIYbncjhZsYlORg8t8QPMH84xtyXHt9Fdcu48xb8XpztSKtrVlWbgYmSgkeMUy5GydG0F3iCfecB1yt7x0TwF7ldzBfpeWMLnzD5KBk+uQiK9ch9YZ9ROJ6pdMEHB/tTExKcK+N1+xvMSoSLnv1kip320itgVOSdwsbVRXl3sAo48lv8cy4/Vq7CKhGKE8yKzu1F/gVpzSYq68RJU3Lnrzr0Nl8mWMEzzunO0SrJVXoeixorRAgMBAAECggEAFeX4LklYJr8/4+TpLm08BAjeAZGGBPllLtzNrwR1GXiVhvMBjoJeW9XqKkRZvhb27gEya73NmNtIYw/3BprzCK2fchBEZqlCvLrOt40Eo6Ewh7xglV+ufuvtCU8kvvAe3rKDvqT7gi6/n1oi/BrFFSmJEY5JIdk8sDCOPpEXFI/bCV8tQiyBfSSEWPkZFeicwbZLpI517yMudf8gNe/7KTW70fzOjqcsBWOT8cvNhefmt4/TkQb3hE+OyVNuZhmPj4jFqi47PKzQqX2N6Bb+RFCNy2S26rNGLWYlYs3rmubNDI9+Haqki3IHt7Zn04cK8/zYtUaakWKVyMpH+l3VNQKBgQDeNHf1jRKgoMM/lxN6e9U8/lgJgFkU+8tTZZiJ28jsyVoZvipiiKIW/4m/486By7xTmT8e6K8bnjhq0DZ5ampZFXK+vucJrOITc17cvTct/lcuwbJ3PnNeplKeWvE0bvMMcbHws9Js5xPHS4Ty7LxJYCg4/9XzA+VeaG/1fJpRzwKBgQC/Qe2bm4bjruV9xBEFzQ+N1lzHakoiLk4CM3jg5a67bA4GJEy+kBHVdYGgm+mjuwijnbvapz/sPidWxMxouCsMVjQ8XbH9rAFrLxruXJy4He1IpjbtVCy01/RizB8AG+KsEwwqgKB9oIYT8qMOJnVDpxGA8+IjaPdIZSgdZcGhXwKBgFNgXq69m4K4L+sZdg6cjpvPWBtglIyCGn4VfhIkbRUkTHGiYGcOm7uDcR2WjjM3zleUBhJD/wie6s5xiC8w1ezNVnvqR+jifQYNYUf0m9LfP7lkpuGFhma6g/+1YhJpmztNIhaOcuO4JTy/woggeloSAaW5oX8JNDSjfXcgpQsTAoGBAKhIGgkQj19GRCaknVW9WDI0qu3LV+87Tugg4fsAHP5L1QsSZXRGz2pCOgxXIvwtVSyhXOjGwDfdeD+gaTq60SXJs6xpxHKvJZBpogiY9EwMCPwjQ7EOn0d/vEgx0hUGdCtzlwDOrGfdFhv3IgERVZxxI7WS4SbG9M1+NA2puvWBAoGAVu/fQJLGG/f85gOrTdkXx8rVvYuOBFGrvnlnDL8RryKesNrP1Q6dAfiippCgR6OPtNR8xxZwUNFYB0XgIYgNE0EQ4Wyt9s/YAl50jMnO3gicF1qvfPeCa5X6htI/2v/b3rnvbAwdVgNfeHidUTfdocGoCSxq1NobjhmvJwzxuBw=",
											order_info: 'http://openapi.alipaydev.com/gateway.do?charset=UTF-8&biz_content={"out_trade_no":"202006091742176318992","total_amount":"88.88","subject":"iPhone+Xs+Max+256G","buyer_id":"2088102175953034","goods_detail":[],"seller_id":"2088102175107499"}&method=alipay.trade.create&sign=Jjld5wh2dPfeM1wd+P5OujWFJOaz9xiFp8q4A4thUIA6GLpd5TKDHiHcg9iUmxlypNueipXbzsN5J3fvRLVdrwGtBjgKtqb2tUasBxiiWbuvydtcDYpwi7K4b+Cs7PHwutCQ0Ao6Tk0TNUtiBDTY/3ZxDjWOklHVJFDAz64ypVp8VSpjId4YW2irYDPgo2c4UUmFF3lKTXfp2EZX6E7kAujmpwvYjjMzAAr9Hi87tplMTpzfnkMHjRNZCXnyH+V8AKrOxu7k/UQC41O2Z34e9MF3aV2ymX+BFLBJbC3Eu42bK0Ej+RBPra9BimMioLebp3G+qmDUa3CgjiTTmgk7HA==&app_id=2016091100484533&sign_type=RSA2&version=1.0&timestamp=2020-06-09+17:42:17'
										}, function(result) { // 支付完成回调
											console.log(result)
											if (result.resultStatus == '5002555') {
												console.log('支付sdk出错')
											} else if (result.resultStatus == '9000') {
												//更改订单状态为2
												uni.request({
													url:_this.webUrl+"updateProductOrderStatusTwo",
													data:{
														proOrderId:proOrderId
													},
													success: (res) => {
														for(var i=0;i<_this.products.length;i++){
															//减库存
															uni.request({
																url:_this.webUrl+"updateProductStock",
																data:{
																	proId:_this.products[i].proId,
																	number:_this.products[i].number
																}
															})
														}
													}
												})
												setTimeout(function(){
													uni.showToast({
														title:"支付成功,等待商家发货"
													})
													uni.navigateTo({
														url:"/pages/liu/productOrderList/productOrderList"
													})
												},3000)
											} else {
												console.log(result.memo);
												uni.showToast({
													title:"意外,支付失败"
												})
											}
										});
									},300)
								}
							},1000);
				        } else if (res.cancel) {
				       
						}
				    }
				});
				
			}
		},
		//获取更改地址后的信息,
		//key对应的value此时是存入的选择的地址所有信息
		onShow() {
			uni.getStorage({
				key:"xuanzeid",
				success: (res) => {
					if(res.data!=null){
						setTimeout(function(){
							uni.showToast({
								title:"收货地址已更改"
							})
						},300)
					}
					this.userAddress=res.data;
				}
			})
			//销毁此key的缓存
			uni.removeStorage({
				key:"xuanzeid"
			})
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(220,220,220);
	}
	.product{
		float: left;
		width: 100%;
		height: 220rpx;
		background-color: white;
		margin-top: 5rpx;
		.left{
			float: left;
			width: 220rpx;
			height: 220rpx;
			text-align: center;
			line-height: 220rpx;
			view{
				float:left;
				margin-top: 16rpx;
				margin-left: 16rpx;
				width: 180rpx;
				height: 180rpx;
				border: 2rpx solid rgb(220,220,220);
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.right{
			float: left;
			width: 530rpx;
			height: 220rpx;
			.proname{
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					color: rgb(148,102,102);
					font-size: 28rpx;
				}
			}
			.proprice{
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					font-size:30rpx;
					color: rgb(148,102,102);
				}
			}
			.pronumber{
				float: left;
				height: 65rpx;
				width: 500rpx;
				margin-top: 6rpx;
				overflow: hidden;
				text{
					font-size: 30rpx;
					color: rgb(148,102,102);
				}
			}
		}
	}
	.total{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		float: left;
		margin-top: 10rpx;
		width: 100%;
		height: 100rpx;
		background-color: white;
		.totalleft{
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			margin-left: 30rpx;
			color: rgb(148,102,102);
		}
		.totalright{
			height: 100rpx;
			line-height: 100rpx;
			margin-right: 30rpx;
			font-size: 30rpx;
			color: rgb(148,102,102);
		}
	}
	.payorder{
		float: left;
		width: 370rpx;
		height: 70rpx;
		background-color:rgb(148,102,102) ;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;
		margin-top: 60rpx;
		margin-left: 190rpx;
		margin-bottom: 60rpx;
		text-align: center;
		color: white;
	}
	.address{
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: white;
		margin-bottom: 5rpx;
		.address1{
			width:30%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: rgb(148,102,102);
			text{
				margin-left:25rpx ;
			}
		}
		.address2{
			width:40%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			color: rgb(148,102,102);
		}
		.address3{
			width:30%;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			text{
				margin-left:160rpx ;
				color: rgb(148,102,102);
			}
		}
	}
	
	.addressDetail{
		width: 100%;
		height: 180rpx;
		float: left;
		background-color: white;
		.name{
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;
			text{
				margin-left: 30rpx;
				font-size: 28rpx;
				color:rgb(148,102,102);
			}
		}
		.tel{
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;
			text{
				margin-left: 30rpx;
				font-size: 28rpx;
				color:rgb(148,102,102);
			}
		}
		.address{
			width: 100%;
			height: 60rpx;
			float: left;
			line-height: 60rpx;
			text{
				margin-left: 30rpx;
				font-size: 28rpx;
				color:rgb(148,102,102);
			}
			overflow: hidden;
		}
	}
</style>
